<template>
  <div ref="chartDom" />
</template>
<script>
import { defineComponent, inject, onMounted, onUnmounted, ref, watch } from 'vue';
import echarts from 'echarts';
import { debounce } from 'lodash-es';
import { addListener, removeListener } from 'resize-detector';
import dark from './dark';
echarts.registerTheme('dark-pro', dark);
export default defineComponent({
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  setup(props) {
    const chartDom = ref(null);
    let chart = null;
    const isRealDark = inject('isRealDark', ref(false));

    const resizeChart = () => {
      chart?.resize();
    };

    const resize = debounce(resizeChart, 300);

    const disposeChart = () => {
      if (chartDom.value) {
        removeListener(chartDom.value, resize);
      }

      chart?.dispose();
      chart = null;
    };

    const initChart = () => {
      disposeChart();

      if (chartDom.value) {
        // init echarts
        chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-pro' : undefined);
        chart.setOption(props.option);
        addListener(chartDom.value, resize);
      }
    };

    watch(
      isRealDark,
      () => {
        initChart();
      },
      {
        flush: 'post',
      },
    );
    onMounted(() => {
      watch(
        () => props.option,
        () => {
          chart?.setOption(props.option);
        },
        {
          deep: true,
          flush: 'post',
        },
      );
      initChart();
    });
    onUnmounted(() => {
      disposeChart();
    });
    return {
      chartDom,
    };
  },
});
</script>
